<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/demo.css">
    <link rel="stylesheet" href="../css/touwei.css">
    <link rel="stylesheet" href="../css/denglu.css">
    <link rel="stylesheet" href="../font/iconfont.css">
    
</head>
<body>
    <header>
        <!-- 头部 -->
        <div class="header_l" class="gray">
           <p>专柜查询</p>
           <p>帮助中心</p>
        </div>
        <div id="header_m">
           <h2>ARMANI
              <p>beauty</p>
           </h2>
  
  
        </div>
        <div class="header_r">
           <p class="button">登录与注册</p>
           <p>我的购物袋
           </p>
        </div>
    
     </header>
     <!-- 导航部分 -->
    
     <nav>
        <div class="nav_m">
           <ul>
              <li class="nav_m1">年中狂欢
                 <span class="iconfont icon-fenlei
                 "></span>
                 <div class="nav_m1_one">
                    <ul>
                       <li>会员礼遇
                          <img src="../images/会员-1920X636_.jpg" alt="">
                       </li>
                       <li>限量礼盒
                          <img src="../images/礼盒入口.jpg" alt="">
                       </li>
  
                       <li>选择你的底妆
                          <img src="../images/Shade-finder02.jpg" alt="">
                       </li>
                       <!--  <li>选择你的底妆
                      <p>臻礼定制 
                       </p>
                      <p>臻礼定制</p>
                      <p>臻礼定制</p>
                      <p>臻礼定制</p -->
              </li>
           </ul>
        </div>
        </li>
        <li>全部产品
           <div class="nav_m1_two">
  
              <ul>
                 <li>明星产品
                    <img src="../images/明星单品入口.jpg" alt="">
                 </li>
                 <li>当季主推
                    <img src="../images/红气垫入口.jpg" alt="">
                 </li>
  
              </ul>
           </div>
        </li>
        <li>彩妆专区
           <div class="nav_m1_there">
              <table>
                 <tr>
                    <th>唇部</th>
                    <th>面部</th>
                    <th>眼部</th>
                    <th>美容工具</th>
  
                 </tr>
                 <tr>
                    <td>唇釉</td>
                    <td>粉底液/气垫</td>
                    <td>眉笔</td>
                    <td>专业化妆刷</td>
                 </tr>
                 <tr>
                    <td>唇膏</td>
                    <td>妆前隔离</td>
                    <td>眼线</td>
  
                 </tr>
                 <tr>
                    <td></td>
                    <td>遮瑕</td>
                    <td>眼影</td>
  
                 </tr>
                 <tr>
                    <td></td>
                    <td>腮红/胭脂</td>
                    <td>睫毛膏</td>
                 </tr>
              </table>
           </div>
        </li>
        <li>护肤专区
           <div class="nav_m1_fore">
              <table>
                 <tr>
                    <th>「黑钥匙」护肤系列</th>
                    <th>光钥新肌护肤系列</th>
                    <th>清洁防晒综合系列</th>
                    <th>男士综合护肤系列</th>
  
                 </tr>
                 <tr>
                    <td>基础清洁</td>
                    <td>基础清洁</td>
                    <td>基础清洁</td>
                    <td>洁面嗜喱</td>
                 </tr>
                 <tr>
                    <td>眼唇保养.</td>
                    <td>眼唇保养</td>
                    <td>防晒隔离</td>
                    <td>舒缓露</td>
  
                 </tr>
                 <tr>
                    <td>精华护肤</td>
                    <td>精华护肤</td>
                    <td></td>
                    <td>保湿乳</td>
  
                 </tr>
                 <tr>
                    <td>面霜/乳液.</td>
  
                 </tr>
                 <tr>
                    <td>特殊修复</td>
  
                 </tr>
              </table>
           </div>
        </li>
        <li>香水专区
           <div class="nav_m1_five">
              <table>
                 <tr>
                    <th>高定私藏香氛</th>
                    <th>女士香水系列</th>
                    <th>男士香水系列</th>
                    <th>明星系列</th>
  
                 </tr>
                 <tr>
                    <td>全新清新系列</td>
                    <td>阿玛尼挚爱香水</td>
                    <td>阿玛尼寄情香水</td>
                    <td>高定私藏香氛</td>
                 </tr>
                 <tr>
                    <td>经典系列.</td>
                    <td>全新MY WAY香水</td>
                    <td></td>
                    <td>挚爱系列</td>
  
                 </tr>
                 <tr>
                    <td>寄情系列</td>
  
  
                 </tr>
  
              </table>
           </div>
        </li>
        <li>大师匠心</li>
        </ul>
  
        <div class="nav_r"> <span>红管</span>
           <span class="iconfont icon-search"></span>
        </div>
  
  
  
     </nav>

<!-- 中间部分 -->

<main>
      <div class="zhuce">

        <div><span class="zhuce-one">密码登录</span><span class="zhuce-two">验证码登录</span></div>
        <div>
         <input  id="username"  type="text" placeholder="请输入手机/用户名" >
         <input type="button" value="获取短信验证码" class="zhuce-fore">
        </div>
        <input id="userpass" type="text" placeholder="请输入密码" >
        <a class="zhuce-seven" href="./zhuce.html" >立即注册</a>
        <button  id="btnLogin">登录</button>
        <!-- <input  id="btnLogin" type="button" value="登录" > -->
        <div id="msg"></div>
 
      </div>

</main>


      <!-- 尾部 -->
      <footer>

        <div class="footer_o">
           <div class="footer_o1"><span>专柜查询</span>
              <input type="text">
           </div>
           <div class="footer_o2">
              <span>关注我们</span>
              <div class="footer_o2_one">
                 <img src="../images/li3.png" alt="">
                 <div class="footer_o2_one1">
  
                 </div>
              </div>
  
              <div class="footer_o2_two">
                 <img src="../images/li5.png" alt="">
                 <div class="footer_o2_two1">
                    <img src="../images/erweima.2dbf6911.jpg" alt="">
                 </div>
              </div>
              <div class="footer_o2_there">
                 <img src="../images/li16.png" alt="">
                 <div class="footer_o2_there1">
                    <img src="../images/erweima.2dbf6911.jpg" alt="">
                 </div>
              </div>
           </div>
        </div>
        <div class="footer_t">
           <table cellspacing="0px" cellpading="0px">
              <tr>
                 <th>彩妆专区</th>
                 <th>护肤专区</th>
                 <th>香水专区</th>
                 <th>明星产品</th>
                 <th>帮助中心</th>
              </tr>
              <tr>
                 <td>唇部</td>
                 <td>「黑钥匙」护肤系列</td>
                 <td>男士</td>
                 <td>阿玛尼[传奇红管J唇釉</td>
                 <td>常见问题</td>
              </tr>
              <tr>
                 <td>面部</td>
                 <td>光钥新肌护肤系列</td>
                 <td>女士</td>
                 <td>阿玛尼大师[蓝气垫J</td>
                 <td>订单查询</td>
              </tr>
              <tr>
                 <td>眼部</td>
                 <td>清洁防晒综合系列</td>
                 <td></td>
                 <td>阿玛尼自我无界香水</td>
                 <td>订单查询</td>
              </tr>
              <tr>
                 <td>美容工具</td>
                 <td>男士综合护肤系列</td>
  
              </tr>
           </table>
        </div>
        <div class="footer_th">
           <img src="../images/li8.png" alt="">
           <p>国家药监局提示您:宣称用于祛斑美白、防晒、染发、烫发等的化妆品为特殊用途化妆品，产品标签上应标注国妆特字或者“国妆特进字的标准文号。</p>
           <p>
              <span>沪公网安备31010602001530号中国工商 沪ICP备08100043号 21</span>
  
           </p>
           <p class="footer_th_m">OL'Oreal China欧莱雅(中国)有限公司版权所有</p>
           <p>GIORGIO ARMANI阿玛尼美妆中国官网，GIORGIO ARMANI阿玛尼美妆天猫旗舰店，阿玛尼美妆官方微信精品商城，为官方认证渠道。</p>
        </div>
     </footer>
</body>
</html>

</html>

<script>

let oBtnLogin = document.getElementById("btnLogin");
let oUserPass = document.getElementById("userpass"); 
let oUserName = document.getElementById("username"); 

oBtnLogin.onclick = function(){
    let xhr = new XMLHttpRequest();
    xhr.open("post","../goodsAndShoppingCart/login.php",true);

    xhr.onreadystatechange = function(){
        if(xhr.readyState==4 && xhr.status==200){
         console.log(xhr.responseText);
           if(xhr.responseText.trim()=="success"){  //.trim()去空格
               document.getElementById("msg").innerHTML = "登录成功";
               location.href="ARMANI.html"
           }else{
               document.getElementById("msg").innerHTML = "登录失败,用户名或者密码错误";
           }
        }
    }

    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    
    let str = "username="+oUserName.value.trim()+"&userpass="+oUserPass.value.trim();
    console.log(oUserName.value);
    xhr.send(str);

}


</script>